<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>张雅丽</title>
   <link rel="stylesheet" href="./css/font_ak9p12vc7lt/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            display: block;
            
        }
        .nav-entry{
            width: 90%;
            height: 196.73px;
            margin: 0 auto;
            border-radius: 8px;
            overflow: hidden;
        }
        .nav-entry .hang{
            width: 100%;
            height: 65.91px;
            display: flex;
        }
        .hang .lie{
            flex: 23%;
            line-height: 65.91px;
            border-right:1px solid #fff ;
            box-sizing: border-box;
            text-align: center;
        }
        .nav-entry .lie:last-child{
            border: none;
        }
        .nav-entry .a .lie:first-child{
            background: url(./image/导航栏/1.png) no-repeat right bottom;
            background-size: 73px  auto;
            border-top-left-radius: 8px;

        }
        .nav-entry .a .lie:nth-child(2){
            background: url(./image/导航栏/2.png) no-repeat left bottom;
            background-size: 37px  auto;
        }
        .nav-entry .a .lie:last-child a{
            display: block;
            background: url(./image/导航栏/3.png) no-repeat right bottom;
           background-size: 90% auto;
            

        }
        .nav-entry .b .lie:first-child{
            background: url(./image/导航栏/4.png)no-repeat right bottom;
            background-size: 79px auto;
        }
        .nav-entry .b .lie:nth-child(2){
            background: url(./image/导航栏/5.png)no-repeat left bottom;
            background-size: 37px auto;
        }
        .nav-entry .c .lie:first-child{
            background: url(./image/导航栏/6.png)no-repeat right bottom;
            background-size: 94px auto;
            border-bottom-left-radius: 8px;
        }
        .nav-entry .c .lie:nth-child(2){
            background: url(./image/导航栏/7.png)no-repeat left bottom;
            background-size: 61px auto;
        }
        .nav-entry .lie:nth-child(1){
            flex: 31%;
        }
        .nav-entry a{
            color: #fff;
            text-decoration: none;
        }
        .nav-entry .a{
            background: linear-gradient(to right,#fa5956,#fb8650 54%);
        }
        .nav-entry .b{
            background: linear-gradient(to right,#4b8fed,#53bced);
        }
        .nav-entry .c{
            background: linear-gradient(to right,#34c2aa,#6cd557);
        }
        .nav-entry .a .lie:last-child{
            flex: 46%;
            background: linear-gradient(to right,#ffbc49,#ffd252);
        }
        .b{
            margin: 1px 0;
        }
        /* 攻略景点导航栏 */
        .local-nav{
            background:#fff;
            border-radius: 8px;
            margin: 10px 12px 10px ;
            display: flex;
            -webkit-box-align: center;
            align-items: center;
            -webkit-box-pack: center;
            justify-content: center;
            padding: 4px 0 8px;
            z-index: 11;
            box-shadow: 0 2px 6px rgb(0 0 0 / 8%);
            list-style: none;
           justify-content: space-around;
           /* position: relative;
           bottom: 65px; */
        }
        
         .local-nav  li a{
            color: #222;
            text-decoration: none;
            display: flex;
            flex-direction: column;
            -webkit-box-align: center;
            font-size: .75rem;
            line-height: 1;
        }
       
        .icon{
            width: 40px;
            height: 40px;
            border-radius: 100%;
            background-image: url(./image/第一导航条/1.png);
            background-repeat: no-repeat;
            background-size: 40px auto;
            display: block;

        }
        .i2{
            background-position: 0 -40px;
        }
        .i3{
            background-position: 0 -80px;
        }
        .i4{
            background-position: 0 -120px;
        }
        .i5{
            background-position: 0 -160px;
        }

        /* 第三 */
        .nav3{
            width: 90%;
            height: 110.05px;
            margin: 10px auto;
            display: flex;
            flex-wrap: wrap;
        }
        .nav3 li{
            flex: 20%;
            list-style-type:none;
            justify-content: center;


        }
        .nav3 li a{
            text-decoration: none;
            color: #222;
            font-size: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .sub-icon{
            width: 28px;
            height: 28px;
            background-repeat: no-repeat;
            display: block;
            background:url(./image/第三导航栏/1.png);
            background-size: 28px ;
            background-repeat: no-repeat;
            /* margin: 0 auto; */
        }
        .s2{
            background-position: 0 -28px;
        }
        .s3{
            background-position: 0 -56px;
        }
        .s4{
            background-position: 0 -84px;
        }
        .s5{
            background-position: 0 -112px;
        }
        .s6{
            background-position: 0 -140px;
        }
        .s7{
            background-position: 0 -168px;
        }
        .s8{
            background-position: 0 -196px;
        }
        .s9{
            background-position: 0 -224px;
        }
        .s10{
            background-position: 0 -252px;
        }

        /* 第四部分 */
        .nav4{
            width: 100%;
            display: flex;
            height: 60.71px;
            border-top:1px solid #eaeaeb;
            border-bottom: 1px solid   #eaeaeb;

        }
        .nav4 li{
            width: 33.33%;
            height: 59.71px;
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: center;
            
        }
        .nav4 li a{
            text-decoration: none;
            color: #222;
            
        }
        .nav4 li span:first-child{
            display: block;
            width: 20px;
            height: 20px;
            margin: 0 auto;
        }
        .nav4 li a span:last-child{
            font-size: 12px;
        }
        /* 第五部分 */
        .nav5{
            color: #999;
            text-align: center;
            margin: 35px auto;
        }
        .nav5 div a{
            padding: 0;
            font-size: 12px;
            color: #666;
            text-decoration: none;
        }
        .nav5 p{
            
            color: #999;
            font-size: 12px;
        }
        .nav5 p a{
            text-decoration: none;
            color: #999;
        }
        .icon-global{
            display: inline-block;
            width: 15px;
            height: 11px;
            background: url(//pic.c-ctrip.com/platform/h5/home/un_icon_sites.png) 0 -160px no-repeat;
            background-size: 30px auto;
            position: relative;
            top: 2px;
            
        }
        .triangle{
            display: inline-block;
            border: 1px solid #666;
            border-width: 0 1px 1px 0;
            width: 5px;
            height: 5px;
            /* -webkit-transform: rotate( 45deg); */
            transform: rotate(45deg);
            vertical-align: 2px;
            margin: 0 3px
        }
        /* 上三部分 */
            .shousuo{
                position: fixed;
                top: 0;
                left: 50%;
                z-index: 12;
                width: 100%;
                max-width: 540px;
                transform: translateX(-50%);
                background: 0 0;
                padding-left: 12px;
                box-sizing: border-box;
                display: flex;
                -webkit-box-align: center;
                align-items: center;
                -webkit-box-pack: start;
                justify-content: flex-start;
                transition: all .5s;
            }
            .shousuo .shousuo2{
                height: 28px;
                line-height: 24px;
                padding: 2px 5px;
                border-radius: 15px;
                background-color:#fff;
                color: #666;
                font-size: .94rem;
                -webkit-box-flex: 1;
                flex: 1;
                box-sizing: border-box;
                position: relative;
            }
            .shousuo .shousuo2 span{
                padding-left: 35px;
            }
            .shousuo .shousuo2 span::after{
                position:absolute;
                top: 0;
                left: 0;
                width: 35px;
                height: 100%;
                overflow: hidden;
                background: url(./image/搜索框/2.png)15px 7px no-repeat;
                background-size: 21px auto;
                content: "";
            }
            .shousuo .shousuo3{
                width: 51px;
                height: 44px;
                display: flex;
                -webkit-box-direction: normal;
                flex-direction: column;
                -webkit-box-align: center;
                align-items: center;
                -webkit-box-pack: center;
                justify-content: center;
                color:#fff;
                font-size: .75rem;
                line-height: 1;
                box-sizing: border-box;
                padding-right: 4px;
            }
            a{
                text-decoration: none;
            }
            .shousuo  .shousuo3:before{
                display: block;
                background: url(./image/搜索框/3.png)1px -36px no-repeat;
                 content: "\0020";
                width: 22px;
                height: 22px;
                background-size: 21px auto;
                margin-bottom: 1px;
                
            }
           /* 背景图片 */
             .baodi{
                position: relative;
                z-index: 10px;
                width: 100%;
                overflow: hidden;
                background: #f2f2f2;
                transform: translateZ(0);
            }
            #img-wrap{
                position: relative;
                z-index: 10;
            }
            #img-wrap:before{
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                z-index: 10;
                height: 60px;
                display: block;
                background: linear-gradient(to bottom,rgba(0,0,0,.4),rgba(0,0,0,0));
                content: "";
            }
            #img-wrap .c-slide img{
                width: 100%;
                display: block;
                /* border: none; */
            }
            .baodi .img_mask{
                position: absolute;
                left: 0;
                right: 0;
                bottom: -2px;
                z-index: 11;
                width: 100%;
                max-height: 36px;
            }
            .baodi .img_mask .img_svg{
                fill: #fafafc;
                width: 100%;
           }
           .shouye{
               position: relative;
               bottom: 65px;
           }
           /* 立即打开 */
           /* #Immediatelyopen {
            width: 100%;
            height: 44px;
            background-color: #232326;
            display: flex;
            color: #ededed;
            font-size: 14px;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            
        }

        #Immediatelyopen li {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #Immediatelyopen li:nth-child(1)>img {
            width: 16px;
        }

        #Immediatelyopen li:nth-child(2)>img {
            width: 35px;
        }

        #Immediatelyopen li:nth-child(1) {
            width: 8%;
        }

        #Immediatelyopen li:nth-child(2) {
            width: 15%;
        }

        #Immediatelyopen li:nth-child(3) {
            width: 55%;
            position: relative;
            right: 65px;
            bottom: 5px;
        }

        #Immediatelyopen li:nth-child(4) {
            color: #999;
            position: absolute;
            top: 25px;
            right: 200px;
            font-size: 14px;
        }

        #Immediatelyopen li:nth-child(5) {
            width: 25%;
            background-color: #cd2525;
        } */
            
    </style>
</head>
<body>
    <!-- 立即打开 -->
    <!-- <ul id="Immediatelyopen">
        <li><img src="./images/顶部盒子/顶部3.png"></li>
        <li><img src="./images/顶部盒子/顶部2.png"></li>
        <li><span>打开京东APP</span></li>
        <li><span>购物轻松又实惠</span></li>
        <li><span>立即打开</span></li>
    </ul> -->
    <!-- <ul>
        <li><img src="./image/背景图/promotion-app-log.png"></li>
        <li><span>携程旅行APP</span></li>
        <li><span>放心的服务 放心的价格</span></li>
    </ul> -->



    <!-- 搜索框 -->
    <div class="shousuo">
        <div class="shousuo2">
            <span>搜索:目的地/酒店/景点/航班号</span>
        </div>
        <a href="javascript:;" class="shousuo3">
            <!-- <span class="shousuo-tp"></span> -->
            
            <span>我 的</span></a>
    </div>
    <!-- 保底图 -->
    <header class="baodi">
        <div id="img-wrap">
            
            <div class="c-slide">
                <img src="./image/背景图/1.jpg" alt="保底图">
            </div>
        </div>
        <svg class="img_mask">
            <g>
                <path class="img_svg" d="M750,1.70530257e-13 L750,50 L0,50 L0,1.70530257e-13 C107.666667,33.3333333 232.666667,50 375,50 C517.333333,50 642.333333,33.3333333 750,1.70530257e-13 Z">

                </path>
                
            </g>
            
        </svg>
    </header>
<div class="shouye">
    
    <!-- 搜索框 -->
    
    
    <!-- local-nav导航 -->

    <ul class="local-nav">
            <li><a href="javascrit:;"><span class="icon i1"></span><span>攻略·景点</span></a></li>
            <li><a href="javascrit:;"><span class="icon i2"></span><span>门票·活动</span></a></li>
            <li><a href="javascrit:;"><span class="icon i3"></span><span>美食林</span></a></li>
            <li><a href="javascrit:;"><span class="icon i4"></span><span>周边游</span></a></li>
            <li><a href="javascrit:;"><span class="icon i5"></span><span>一日游</span></a></li>
    </ul>
    <!-- 导航 -->
    <div id="nav" class="nav-entry">
        <!-- 第一个 -->
        <div class="hang a">
            <div class="lie"><a href="javascript:;"><span>酒店</span></a></div>
            <div class="lie"><a href="javascript:;"><span>民宿·客栈</span></a></div>
            <div class="lie"><a href="javascript:;"><span>特价·爆款</span></a></div>
        </div>
        <!-- 第二个 -->
        <div class="hang b">
            <div class="lie"><a href="javascript:;"><span>机票</span></a></div>
            <div class="lie"><a href="javascript:;"><span>火车票</span></a></div>
            <div class="lie"><a href="javascript:;"><span>汽车·船票</span></a></div>
            <div class="lie"><a href="javascript:;"><span>专车·租车</span></a></div>
        </div>
        <!-- 第三个 -->
        <div class="hang c">
            <div class="lie"><a href="javascript:;"><span>旅游</span></a></div>
            <div class="lie"><a href="javascript:;"><span>私家团</span></a></div>
            <div class="lie"><a href="javascript:;"><span>邮轮游</span></a></div>
            <div class="lie"><a href="javascript:;"><span>定制游</span></a></div>
        </div>


        
            
  
   
</div>
<!-- 第三导航栏 -->
<ul class="nav3">
            <li><a href="javascript:;"><span class="sub-icon s1"></span><span>自由行</span></a></li>
            <li><a href="javascript:;"><span class="sub-icon s2"></span><span>WiFi电话卡</span></a></li>
            <li><a href="javascript:;"><span class="sub-icon s3"></span><span>保险·签证</span></a></li>
            <li><a href="javascript:;"><span class="sub-icon s4"></span><span>换钞·购物</span></a></li>
            <li><a href="javascript:;"><span class="sub-icon s5"></span><span>向导·包车</span></a></li>
            <li><a href="javascript:;"><span class="sub-icon s6"></span><span>特价机票</span></a></li>
            <li><a href="javascript:;"><span class="sub-icon s7"></span><span>礼品卡</span></a></li>
            <li><a href="javascript:;"><span class="sub-icon s8"></span><span>申卡·借钱</span></a></li>
            <li><a href="javascript:;"><span class="sub-icon s9"></span><span>社区</span></a></li>
            <li><a href="javascript:;"><span class="sub-icon s10"></span><span>更多</span></a></li>
</ul>

<!-- 第4导航栏 footer -->
<footer class="tool-box">
    <!-- 第四导航栏 -->
    <ul class="nav4">
        <li><a href="# ">
            <span class="iconfont icon-dianhua"></span>
            <span>电话预定</span>
        </a></li>
        <li><a href="#  ">
            <span class="iconfont icon-wode"></span>
            <span>下载客户端</span>
        </a></li>
        <li><a href="#">
            <span class="iconfont icon-xiazai"></span>
            <span>我的</span>
        </a></li>
    </ul>
    <!-- 第五部分 -->
    <div class="nav5">
        <div>
            <a href="javascript:;">网站地图</a>｜
            <a href="javascript:;"><span class="icon-global"></span>Lauguage<span class="triangle"></span></a>｜
            <a href="javascript:;">电脑版</a>
        </div>
        
        <p>
            ©
            <label class="copyno">2021</label>
            携程旅行｜
            <a href="http://www.miibeian.gov.cn/" class="link-icp">沪ICP备08023580号</a>
        </p>
    </div>
    
</footer>

</body>
</html>